<!-- 秒杀组件 -->
<template>
  <!-- <div class="index-seckill" v-if="endTime >= +new Date() / 1000"> -->
  <div class="index-seckill" v-if="seckillDatas">
    <!-- 秒杀的上部分 -->
    <div class="seckill-top">
      <img
        src="https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978468241.png"
        alt=""
      />
      <div class="seckill-time">
        <span>{{ hours }}</span>
        <i>:</i>
        <span>{{ mins }}</span>
        <i>:</i>
        <span>{{ secs }}</span>
      </div>
      <!-- 秒杀的轮播 -->
      <a href="#" class="more-link"
        >更多
        <i class="iconfont icon-jiantou2"></i>
      </a>
    </div>
    <!-- 秒杀的轮播 -->
    <div class="swiper-container seckillSwiper">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="seckillData in seckillDatas"
          :key="seckillData.id"
        >
          <img :src="seckillData.goods_thumb" alt="" />
          <div class="title">
            {{ seckillData.title }}
          </div>
          <!-- 商品价格 -->
          <div class="currency-price">
            <em>¥</em>
            <!-- 整数 -->
            <span>{{ seckillData.shop_price | setInt }}</span>
            <!-- 小数 -->
            <em>{{ seckillData.shop_price | setFloat }}</em>
          </div>
          <!-- 原价价格 -->
          <div class="rebate-price">
            <del>{{ seckillData.market_price_formated }}</del>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// 引入swiper对象
import { HomeSeckillApi } from "@/api/home.js";
import Swiper from "swiper";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      hours: "",
      mins: "",
      secs: "",
      endTime: null,
      interId: null,
      seckillDatas: null,
      // seckillDatas: [
      //   {
      //     id: 283,
      //     goods_id: 974,
      //     shop_price: "600.00",
      //     shop_price_formated: "¥600.00",
      //     market_price: "960.00",
      //     market_price_formated: "¥960.00",
      //     title:
      //       "艾伦 Y700平板电脑12寸超薄智能wifi二合一10新款高清三星屏吃鸡游戏",
      //     goods_thumb:
      //       "https://x.dscmall.cn/storage/images/201809/thumb_img/0_thumb_G_1536605332768.jpg",
      //   },
      //   {
      //     id: 226,
      //     goods_id: 803,
      //     shop_price: "7700.00",
      //     shop_price_formated: "¥7700.00",
      //     market_price: "454.80",
      //     market_price_formated: "¥454.80",
      //     title:
      //       "猫人Joyoung/九阳 Y-50C15电压力锅高压锅正品双胆智能预约5L铁釜新品 土灶铁斧 双重安",
      //     goods_thumb:
      //       "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490175230574.jpg",
      //   },
      //   {
      //     id: 225,
      //     goods_id: 655,
      //     shop_price: "7700.00",
      //     shop_price_formated: "¥7700.00",
      //     market_price: "3598.79",
      //     market_price_formated: "¥3598.79",
      //     title:
      //       "美的 MB80-eco31WD 8公斤变频洗衣机全自动波轮智能大容量 省电静音 0.9洗净比 洗得更干净",
      //     goods_thumb:
      //       "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489105638483.jpg",
      //   },
      //   {
      //     id: 224,
      //     goods_id: 650,
      //     shop_price: "7700.00",
      //     shop_price_formated: "¥7700.00",
      //     market_price: "3598.79",
      //     market_price_formated: "¥3598.79",
      //     title:
      //       "乔山Skyworth/创维 55V9E 55吋4K超高清智能网络平板LED液晶电视机 50 25核智能 4K超高清 人气爆款",
      //     goods_thumb:
      //       "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489105386951.jpg",
      //   },
      //   {
      //     id: 223,
      //     goods_id: 649,
      //     shop_price: "7700.00",
      //     shop_price_formated: "¥7700.00",
      //     market_price: "1800.00",
      //     market_price_formated: "¥1800.00",
      //     title:
      //       "文轩网Midea/美的 F6021-X1(S)热水器储水式 家用洗澡电热水器抑菌节能 直降150 购买送净水器+花洒套装",
      //     goods_thumb:
      //       "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489105301550.jpg",
      //   },
      //   {
      //     id: 222,
      //     goods_id: 647,
      //     shop_price: "7700.00",
      //     shop_price_formated: "¥7700.00",
      //     market_price: "585.60",
      //     market_price_formated: "¥585.60",
      //     title:
      //       "七匹狼志高嵌入式电陶炉家用双头双灶镶嵌式电磁炉双眼光波炉特价正品 不挑锅可烧烤 三环猛火 嵌入式双灶",
      //     goods_thumb:
      //       "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489105175252.jpg",
      //   },
      //   {
      //     id: 237,
      //     goods_id: 624,
      //     shop_price: "7700.00",
      //     shop_price_formated: "¥7700.00",
      //     market_price: "5160.00",
      //     market_price_formated: "¥5160.00",
      //     title:
      //       "途牛名龙堂i7 6700升7700 GTX1060 6G台式电脑主机DIY游戏组装整机 升6GB独显 送正版WIN10 一年上门",
      //     goods_thumb:
      //       "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489099128797.jpg",
      //   },
      //   {
      //     id: 238,
      //     goods_id: 623,
      //     shop_price: "7700.00",
      //     shop_price_formated: "¥7700.00",
      //     market_price: "4305.59",
      //     market_price_formated: "¥4305.59",
      //     title:
      //       "钙尔奇京天华盛i5 7500/GTX1050Ti独显台式机组装机DIY整机游戏电脑主机 热销25万台 跑分17万 升7代CPU",
      //     goods_thumb:
      //       "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489098724131.jpg",
      //   },
      //   {
      //     id: 239,
      //     goods_id: 622,
      //     shop_price: "7700.00",
      //     shop_price_formated: "¥7700.00",
      //     market_price: "10798.80",
      //     market_price_formated: "¥10798.80",
      //     title: "苹果 27” Retina 5K显示屏 iMac:3.3GHz处理器2TB存储",
      //     goods_thumb:
      //       "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489098597912.jpg",
      //   },
      //   {
      //     id: 240,
      //     goods_id: 621,
      //     shop_price: "7700.00",
      //     shop_price_formated: "¥7700.00",
      //     market_price: "2640.00",
      //     market_price_formated: "¥2640.00",
      //     title:
      //       "小米三星C24F396FH曲面显示器23.5英寸电脑显示器24液晶显示屏幕超22",
      //     goods_thumb:
      //       "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489098360804.jpg",
      //   },
      // ],
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    seckillFun() {
      let nowTime = +new Date() / 1000;
      let time = this.endTime - nowTime;
      // console.log(nowTime);
      //   时
      let hours = parseInt((time / 60 / 60) % 24);
      this.hours = hours < 10 ? "0" + hours : hours;
      //   分
      let mins = parseInt((time / 60) % 60);
      this.mins = mins < 10 ? "0" + mins : mins;
      //   秒
      let secs = parseInt(time % 60);
      this.secs = secs < 10 ? "0" + secs : secs;
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    HomeSeckillApi({ num: 10 }).then((res) => {
      // console.log(res.data.data.goods);
      this.seckillDatas = res.data.data.goods;
      this.endTime = res.data.data.end_time;
      // console.log(this.endTime);
      // 现在的时间
      let nowTime = +new Date() / 1000;
      if (nowTime < this.endTime) {
        this.interId = setInterval(this.seckillFun, 1000);
      }
      // 实例化swiper
      this.$nextTick(() => {
        new Swiper(".seckillSwiper", {
          slidesPerView: 3.5,
          // slide之间的空隙
          // spaceBetween: 30,
        });
      });
    });
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {
    // 实例化swiper
    console.log("更新");
    let nowTime = +new Date() / 1000;
    if (nowTime >= this.endTime) {
      console.log("更新");
      clearInterval(this.interId);
    }
  }, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {
    console.log("销毁");
    // clearInterval(this.interId);
  }, //生命周期 - 销毁完成
  activated() {
    console.log("激活");
  }, //如果页面有keep-alive缓存功能，激活
  deactivated() {
    console.log("非激活");
  }, //如果页面有keep-alive缓存功能，非激活
};
</script>
<style lang="less">
.index-seckill {
  width: 100%;
  height: 23rem;
  background-color: #fff;
  // 头部
  .seckill-top {
    width: calc(100% - 2rem);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      height: 1.5rem;
    }
    .seckill-time {
      width: 60%;
      display: flex;
      span {
        font-size: 1.2rem;
        height: 1.6rem;
        padding: 0 0.4rem;
        background: #4f4f4f;
        color: #fff;
        margin: 0 0.2rem;
        border-radius: 2rem;
        line-height: 1.6rem;
      }
    }
    //   更多
    .more-link {
      font-size: 1.3rem;
      margin-left: 0.8rem;
      padding-left: 0.8rem;
      border-left: 1px solid #e3e8ee;
      color: #464c5b;
    }
  }
  // 轮播
  .seckillSwiper {
    width: 95%;
    margin: 0 auto;
    height: 19.2rem;
    .swiper-slide {
      text-align: center;
      height: 19rem;
      img {
        height: 10rem;
      }
      .title {
        font-size: 1.2rem;
        margin-top: 0.2rem;
        font-weight: 400;
        line-height: 1.5rem;
        height: 3rem;
        // 多行文本省略号
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      // 现价
      .currency-price {
        margin: 0.5rem 0;
        font-weight: 700;
        color: rgb(228, 49, 36);
        font-size: 1.5rem;
        em {
          font-size: 1.2rem;
        }
      }
      // 原价
      .rebate-price {
        font-size: 1.2rem;
        color: rgb(136, 136, 136);
      }
    }
  }
}
</style>